<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发者 - 个人主页</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: #333333;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            line-height: 1.6;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 2rem;
            width: 100%;
        }
        
        header {
            text-align: center;
            padding: 1rem 0;
            margin-bottom: 2rem;
        }
        
        .name {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #2c3e50;
            letter-spacing: 1px;
        }
        
        .intro {
            font-size: 1.2rem;
            color: #7f8c8d;
            max-width: 800px;
            margin: 0 auto;
            line-height: 1.8;
            padding: 0 1rem;
        }
        
        .tabs {
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        
        .tab {
            padding: 1rem 2rem;
            background: transparent;
            color: #3498db;
            border: 2px solid #3498db;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 1.1rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .tab:hover {
            background: #3498db;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.2);
        }
        
        .tab.active {
            background: #3498db;
            color: white;
        }
        
        .terminal-container {
            margin-top: 2rem;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            height: 400px;
            display: none;
        }
        
        .terminal-container.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .terminal-header {
            background: #f8f8f8;
            padding: 0.8rem 1.2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eaeaea;
        }
        
        .terminal-controls {
            display: flex;
            gap: 0.5rem;
        }
        
        .control {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        
        .close { background: #ff5f56; }
        .minimize { background: #ffbd2e; }
        .maximize { background: #27c93f; }
        
        .terminal-title {
            font-weight: 600;
            color: #555;
            font-size: 0.9rem;
        }
        
        .terminal {
            background-color: #2c3e50;
            color: #ecf0f1;
            padding: 1.5rem;
            height: 100%;
            overflow-y: auto;
            font-family: 'Fira Code', 'Monaco', 'Cascadia Code', monospace;
            font-size: 0.95rem;
        }
        
        .prompt {
            color: #3498db;
            font-weight: 600;
        }
        
        .command {
            color: #2ecc71;
        }
        
        .response {
            margin-bottom: 1.2rem;
            white-space: pre-wrap;
            line-height: 1.7;
        }
        
        .cursor {
            display: inline-block;
            width: 8px;
            height: 16px;
            background-color: #3498db;
            animation: blink 1s infinite;
            margin-left: 4px;
            vertical-align: middle;
        }
        
        @keyframes blink {
            0%, 50% { opacity: 1; }
            51%, 100% { opacity: 0; }
        }
        
        .typing-text {
            border-right: 2px solid #3498db;
            white-space: nowrap;
            overflow: hidden;
        }
        
        footer {
            text-align: center;
            padding: 2rem;
            color: #7f8c8d;
            margin-top: auto;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            .name {
                font-size: 2.2rem;
            }
            
            .intro {
                font-size: 1rem;
            }
            
            .tab {
                padding: 0.8rem 1.5rem;
                font-size: 1rem;
            }
            
            .terminal {
                padding: 1rem;
                font-size: 0.85rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1 class="name">开发者个人主页</h2>
            <p class="intro">一名普通的学生，对云原生、后端开发、神经网络、算法等方向感兴趣</p>
        </header>
        
        <div class="tabs">
            <button class="tab active" data-tab="about">
                <i class="fas fa-user"></i> 详细介绍
            </button>
            <button class="tab" data-tab="projects">
                <i class="fas fa-code"></i> 项目经验
            </button>
            <button class="tab" data-tab="skills">
                <i class="fas fa-cogs"></i> 技术技能
            </button>
            <button class="tab" data-tab="contact">
                <i class="fas fa-envelope"></i> 联系方式
            </button>
        </div>
        
        <div id="about-terminal" class="terminal-container active">
            <div class="terminal-header">
                <div class="terminal-controls">
                    <div class="control close"></div>
                    <div class="control minimize"></div>
                    <div class="control maximize"></div>
                </div>
                <div class="terminal-title">about.txt</div>
                <div style="width: 60px;"></div>
            </div>
            <div class="terminal">
                <div id="about-content" class="response">
                    <!-- Content will be typed here -->
                </div>
            </div>
        </div>
        
        <div id="projects-terminal" class="terminal-container">
            <div class="terminal-header">
                <div class="terminal-controls">
                    <div class="control close"></div>
                    <div class="control minimize"></div>
                    <div class="control maximize"></div>
                </div>
                <div class="terminal-title">projects.txt</div>
                <div style="width: 60px;"></div>
            </div>
            <div class="terminal">
                <div id="projects-content" class="response">
                    <!-- Content will be typed here -->
                </div>
            </div>
        </div>
        
        <div id="skills-terminal" class="terminal-container">
            <div class="terminal-header">
                <div class="terminal-controls">
                    <div class="control close"></div>
                    <div class="control minimize"></div>
                    <div class="control maximize"></div>
                </div>
                <div class="terminal-title">skills.txt</div>
                <div style="width: 60px;"></div>
            </div>
            <div class="terminal">
                <div id="skills-content" class="response">
                    <!-- Content will be typed here -->
                </div>
            </div>
        </div>
        
        <div id="contact-terminal" class="terminal-container">
            <div class="terminal-header">
                <div class="terminal-controls">
                    <div class="control close"></div>
                    <div class="control minimize"></div>
                    <div class="control maximize"></div>
                </div>
                <div class="terminal-title">contact.txt</div>
                <div style="width: 60px;"></div>
            </div>
            <div class="terminal">
                <div id="contact-content" class="response">
                    <!-- Content will be typed here -->
                </div>
            </div>
        </div>
    </div>
    
    <footer>
        <p>© 2025 开发者个人主页 | 感谢访问</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const tabs = document.querySelectorAll('.tab');
            const terminals = document.querySelectorAll('.terminal-container');
            
            // Content for each terminal
            const contents = {
                about: `================== 个人介绍 ==================\n昵称: ~~~\n学校: 国内某高校\n专业: 软件工程\n年级: ~~~\n\n=============== 个人经历与兴趣爱好 ===============\n以优异成绩考入国内某高校软件工程专业，曾在知名科技公司实习，对云原生、后端开发和人工智能方向有浓厚兴趣。
热爱技术，喜欢探索新的技术领域，正在学习Kubernetes、Docker等云原生技术，以及AI技术的原理和应用。
除了编程外，喜欢阅读书籍、参加技术社区活动、运动和旅行。坚信技术改变世界，希望通过自己的努力为科技发展做出贡献。`,
                
                projects: `## 容器底层原理学习项目(2025.08 - 今)\n- Under-Container 是一个聚焦容器底层原理与云原生技术栈 的学习项目，旨在帮助开发者从 Linux 内核基础出发，逐层拆解容器技术的实现逻辑，最终理解现代云架构中容器的设计理念与工作机制。\n- 我们不满足于“会用容器工具”，更追求“懂容器本质”——通过从Linux 容器底层原理到安全容器构建的全流程实践，让你掌握容器隔离、运行时、编排等核心技术的底层逻辑，为深入云原生领域打下坚实基础。\n- 项目链接: [项目托管平台]/[用户名]/[项目名]`,
                
                skills: `[编程语言]\n- Go: ★★★★☆\n- Python: ★★★☆☆\n- Java: ★★★☆☆\n- C++: ★★☆☆☆\n- Rust: ★★☆☆☆\n\n[框架与技术]\n- Kubernetes:★★★★☆\n- Docker: ★★★☆☆\n- Spring: ★★★☆☆\n- MySQL: ★★★☆☆\n- Redis: ★★☆☆☆\n\n[开发工具]\n- Git: ★★★☆☆\n- Linux: ★★★★☆\n`,
                
                contact: `如果您想与我联系，请通过以下方式：
                
- 技术博客: [个人技术博客地址]
- 代码托管: [代码托管平台]/[用户名]
- 电子邮箱: [用户名]@example.com
- 社交媒体: @[用户名]

欢迎交流技术问题、项目合作或学习心得！`
            };
            
            // Tab switching functionality
            tabs.forEach(tab => {
                tab.addEventListener('click', () => {
                    const tabId = tab.getAttribute('data-tab');
                    
                    // Update active tab
                    tabs.forEach(t => t.classList.remove('active'));
                    tab.classList.add('active');
                    
                    // Show corresponding terminal
                    terminals.forEach(terminal => {
                        terminal.classList.remove('active');
                    });
                    const activeTerminal = document.getElementById(`${tabId}-terminal`);
                    activeTerminal.classList.add('active');
                    
                    // Type content if not already typed
                    if (!activeTerminal.querySelector('.typed')) {
                        typeContent(tabId);
                    }
                });
            });
            
            // Type content for the active tab
            function typeContent(tabId) {
                const contentElement = document.getElementById(`${tabId}-content`);
                const content = contents[tabId];
                contentElement.innerHTML = '';
                contentElement.classList.add('typing-text');
                
                let i = 0;
                const typing = setInterval(() => {
                    if (i < content.length) {
                        // Handle line breaks
                        if (content[i] === '\n') {
                            contentElement.innerHTML += '<br>';
                        } else {
                            contentElement.innerHTML += content[i];
                        }
                        i++;
                    } else {
                        clearInterval(typing);
                        contentElement.classList.remove('typing-text');
                        contentElement.classList.add('typed');
                    }
                }, 20);
            }
            
            // Initialize by typing the about content
            typeContent('about');
        });
    </script>
</body>
</html>